<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">
        搜索关键字：<input type="text" placeholder="关键字" v-model="keyword">
    </div>
</body>

</html>
<script>
    //关联VM
    const VM = new Vue({
        el: '#app',
        data: {
            keyword: ''
        },
        watch: {
            //监听属性的时候，当属性值发生变化的监听的函数会立即执行一次
            //底下书写的监听VM->属性名字【VM身上没有这个响应式属性，监听不到的】


            // 1. 函数写法
            // keyword(){
            //     console.log('变化了')
            // }
            // 2.对象写法
            keyword: {
                //如果是对象的写法，通过handler方法监听属性值的变化
                //函数的名字不能瞎写 
                handler() {
                    console.log('bianhuale')
                }
            }
        }
        // 总结：
        //监听VM响应式属性写法 ，不管是对象、函数写法都常用
        //第一种函数写法
        //第二种对象写法
    })
</script>